<template>
<div>
  <el-dialog
    :close-on-click-modal="false"
    :show-close="false"
    title="关联商品"
    :visible.sync="isAdd"
  >
    <div class="table-data">
      <div class="search-box">
        <el-input size="small" v-model="searchMap.title" placeholder="商品名称"></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <el-table :data="addTableData" border style="width:100%" :height="tHeight" class="table-box">
        <el-table-column label="商品图片"  prop="id">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px" :src="scope.row.cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品名称"  prop="title">

        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleAdd(scope.$index,scope.row)" size="mini" type="primary">选取</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('closeDialog')" size="small">取消</el-button>
      <!-- <el-button @click="submitFormAdd('ruleForm')" type="primary" size="small">确定</el-button> -->
    </span>
  </el-dialog>
  
    <EditDialog :isEdit="edit" :key="timer" @closeDialog="closeDialog" @loadData="loadData" :form="formData" :mch_id="mch_id"></EditDialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import channelApi from "@/api/channel";
import commonApi from "@/api/common";
import EditDialog from "./EditDialog.vue";
@Component({
  components: {EditDialog}
})
export default class specialAddDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) isEdit!: boolean;
  @Prop(Boolean) isAdd!: boolean;
  @Prop() mch_id!: '';
  // @Prop(Object) form!: {
  //   title:string,
  //   sku_id:number,
  // };
  // @Prop(Array) addTableData!: [];
  @Provide() addTableData:any= [];
  @Provide() edit:any= false;
  @Provide() formData:any= {};
  @Provide() timer: any = '';
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() searchMap:{
    title: any
  }={
    title:""
  }
  @Provide() subData:any= [{
    goods_id:"",
    sku_id:"",
    stock: "",
    platform_price:"",
    mch_id:""
  }]
   // 关闭弹窗
  closeDialog() {
    this.edit = false;
  }
  // 选取
  handleAdd(index:any,row:any){
    this.formData=row
    this.edit=true
    this.$emit("closeDialog")
    // console.log(this.addTableData[index].id)
    // this.subData[0].goods_id=this.addTableData[index].id
    // this.subData[0].sku_id=0
    // this.subData[0].stock=this.addTableData[index].stock
    // this.subData[0].platform_price=this.addTableData[index].platform_price
    // this.subData[0].mch_id=this.mch_id
    // channelApi.saveSet(this.subData)
    // .then((res: any) => {
    //   this.$emit("closeDialog");
    //   this.$emit("loadData")
    //   if(res.data.status){
    //     this.$message({
    //       message: '操作成功',
    //       type: "success"
    //     });
    //   }
    // });
  }
  handleSearch(): void {commonApi
    // 点击搜索
    this.isAdd = true;
    commonApi.alertGoodsList(this.searchMap)
      .then((res: any) => {
        this.addTableData = res.data.data.goods_lists.data;
      });
  }
  loadData(){
    this.$emit("loadDatas")
  }
  created() {
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  .el-input,
  .el-select {
    width: 200px !important;
  }
}
</style>
